<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息情报局</title>
    <link rel="shortcut icon" href="/favicon.png">
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #1e1e1e;
        }

        .kline-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .kline {
            width: 50%;
            height: 100%;
            position: relative;
        }

        .warning {
            display: none;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            line-height: 100px;
            z-index: 9999;
            background: rgba(255, 0, 0, .5);
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            -webkit-animation: blink .75s linear infinite;
            animation: blink .75s linear infinite;
        }

        .kline.active .warning {
            display: block;
        }
    </style>
</head>

<body>
<audio id="audio">
    <source src="/audio/di.mp3" type="audio/mp3">
</audio>
<div class="kline-container" id="kline-container"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://widget.aicoin.net.cn/chart/js/aicoin.js"></script>
<script>
  var currency = '', currentSymbol = 'BTCUSDT'
  initWs()
  initChart('HUOBIPROBTCUSDT')

  function handleMessage (symbol) {
    $('#audio')[0].currentTime = 0
    $('#audio')[0].play()
    messageTimer(symbol)
    if (symbol !== currentSymbol) {
      currentSymbol = symbol
      initChart('HUOBIPRO' + symbol)
    }
  }

  function initChart (symbol) {
    new AICoin.chart({
      'symbol': symbol,
      'default_step': '60',
      'default_theme': 'dark',
      'disable_theme_change': true,
      'container': 'kline-container',
      'lang': 'zh'
    })
  }

  var msgTimer = null

  function messageTimer (title) {
    clearInterval(msgTimer)
    var times = 0
    msgTimer = setInterval(function () {
      if (times % 2 === 0) {
        document.title = '【新消息】' + title
      } else {
        document.title = '【　　　】' + title
      }
      times++
      if (times > 20) {
        clearInterval(msgTimer)
        document.title = '消息情报局'
      }
    }, 1000)
  }

  var connectTimer = null

  function initWs () {
    var ws = new WebSocket('ws://118.193.228.122:8080')

    ws.addEventListener('open', function (event) {
      ws.send('hello server!')
    })

    ws.addEventListener('message', function (event) {
      try {
        var data = JSON.parse(event.data)
      } catch (e) {
        console.log('Message from server ', event.data)
      }
      if (data && data.symbol) {
        console.log('Message from server ', data.symbol)
        handleMessage(data.symbol.toUpperCase())
      }
    })

    ws.addEventListener('close', function (event) {
      console.log('close')
      clearTimeout(connectTimer)
      connectTimer = setTimeout(function () {
        initWs()
      }, 2000)
    })

    ws.addEventListener('error', function (event) {
      console.log('error')
      clearTimeout(connectTimer)
      connectTimer = setTimeout(function () {
        initWs()
      }, 2000)
    })
  }
</script>
</body>

</html>